<script>
import { defineComponent, computed } from 'vue'
import { createNamespace, transformStyleSize } from '../utils'
import FanIcon from '../icon/icon.vue'

export default defineComponent({
	name: createNamespace('Cell')[0],
	options: {
		// https://uniapp.dcloud.io/matter.html#mp
		virtualHost: true
	},
	components: { FanIcon },
	emits: ['click'],
	props: {
		title: {
			type: [String, Number],
			default: ''
		},
		titleStyle: [String, Object],
		value: {
			type: [String, Number],
			default: ''
		},
		valueStyle: [String, Object],
		desc: {
			type: [String, Number],
			default: ''
		},
		descStyle: [String, Object],
		center: {
			type: Boolean,
			default: false
		},
		width: String,
		height: String,
		margin: String,
		padding: String,
		radius: String,
		color: String,
		titleColor: String,
		valueColor: String,
		descColor: String,
		bg: String,
		prefixIcon: String,
		suffixIcon: String,
		prefixIconCenter: {
			type: Boolean,
			default: false
		},
		suffixIconCenter: {
			type: Boolean,
			default: false
		},
		prefixIconColor: {
			type: String,
			default: 'inherit'
		},
		suffixIconColor: {
			type: String,
			default: 'inherit'
		},
		iconSize: [String, Number],
		prefixIconSize: [String, Number],
		suffixIconSize: [String, Number],
		prefixIconMargin: String
	},
	setup(props, context) {
		const theStyle = computed(() => {
			const { color, bg, radius } = props
			const obj = {}
				;['width', 'height', 'padding', 'margin'].forEach((k) => props[k] && (obj[k] = props[k]))

			if (bg) obj['--fan-cell-bg'] = bg

			const c = color ? color : ''
			if (c) obj['--fan-cell-text-color'] = c
			if (radius || radius === 0) obj['--fan-cell-border-radius'] = radius
			return transformStyleSize(obj)
		})
		const theTitleStyle = computed(() => {
			const { titleStyle, titleColor } = props
			const obj = {}
			if (titleColor) obj['--fan-cell-title-color'] = titleColor
			return transformStyleSize(titleStyle) + transformStyleSize(obj)
		})

		const theValueStyle = computed(() => {
			const { valueStyle, valueColor } = props
			const obj = {}
			if (valueColor) obj['--fan-cell-value-color'] = valueColor
			return transformStyleSize(valueStyle) + transformStyleSize(obj)
		})

		const theDescStyle = computed(() => {
			const { descStyle, descColor } = props
			const obj = {}
			if (descColor) obj['--fan-cell-desc-color'] = descColor
			return transformStyleSize(descStyle) + transformStyleSize(obj)
		})

		const onClick = (e) => {
			context.emit('click', e)
		}

		return { theStyle, theTitleStyle, theValueStyle, theDescStyle, onClick }
	}
})
</script>

<template>
	<div class="fan-cell" :class="{
			'fan-cell--center': center
		}" :style="theStyle">
		<div :class="{
			'fan-cell-icon--center': prefixIconCenter
		}">
			<FanIcon v-if="prefixIconCenter" :name="prefixIcon" :color="prefixIconColor" :size="prefixIconSize || iconSize"
				:style="{ margin: prefixIconMargin }" class="fan-cell-title-icon" />
			<div>
				<div class="fan-cell-title" :style="theTitleStyle">
					<slot name="title">
						<slot name="prefix-icon">
							<FanIcon v-if="prefixIcon && !prefixIconCenter" :name="prefixIcon" :color="prefixIconColor"
								:size="prefixIconSize || iconSize" :style="{ margin: prefixIconMargin }" class="fan-cell-title-icon" />
						</slot>
						<span>{{ title }}</span>
					</slot>
				</div>
				<div class="fan-cell-title-desc" :style="theDescStyle">
					<slot name="desc">
						{{ desc }}
					</slot>
				</div>
			</div>
		</div>
		<div class="fan-cell-content" @click="onClick" :style="theValueStyle">
			<slot name="value">
				<span>{{ value }}</span>
				<slot name="suffix-icon">
					<FanIcon :name="suffixIcon" :color="suffixIconColor" :size="suffixIconSize || iconSize"
						class="fan-cell-content-icon" />
				</slot>
			</slot>
		</div>
	</div>
</template>

<style lang="less">
.fan-cell {
	--fan-cell-bg: var(--fan-white);
	--fan-cell-text-color: var(--fan-text-color);
	--fan-cell-text-size: var(--fan-font-size-md);
	--fan-cell-border-radius: 0px;
	--fan-cell-title-color: var(--fan-cell-text-color);
	--fan-cell-value-color: var(--fan-black-1);
	--fan-cell-desc-color: var(--fan-black-1);

	background-color: var(--fan-cell-bg);
	display: flex;
	justify-content: space-between;
	padding: 12px 16px;
	font-size: var(--fan-cell-text-size);
	color: var(--fan-cell-text-color);

	border-radius:var(--fan-cell-border-radius) &--center {
		align-items: center;
	}

	&-icon--center {
		display: flex;
		align-items: center;
	}

	&--link {
		cursor: pointer;

		&:active {
			background-color: var(--fan-black-c);
			opacity: var(--fan-active-opacity);
		}
	}

	&-title {
		display: flex;
		align-items: center;

		color:var(--fan-cell-title-color) &-icon {
			margin-right: var(--fan-padding-base);
		}

		&-desc {
			font-size: var(--fan-font-size-sm);
			color: var(--fan-cell-desc-color);
			margin-top: 4px;
			line-height: 18px;
		}
	}

	&-content {
		display: flex;
		align-items: center;
		color: var(--fan-cell-value-color);

		&-icon {
			margin-left: var(--fan-padding-base);
		}
	}
}
</style>